<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/cr/ui.html">
<link rel="import" href="chrome://resources/html/cr/ui/command.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://downloads/browser_proxy.html">
<link rel="import" href="chrome://downloads/constants.html">
<link rel="import" href="chrome://downloads/i18n_setup.html">
<link rel="import" href="chrome://downloads/item.html">
<link rel="import" href="chrome://downloads/search_service.html">
<link rel="import" href="chrome://downloads/toolbar.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-ajax/iron-ajax.html">
<link rel="import" href="chrome://downloads/login.html">

<link rel="import" href="chrome://downloads/signup.html">

<!--
<link rel="import" href="chrome://downloads/checkbox.html">
-->
<dom-module id="downloads-manager">
    <template>
        <style include="cr-hidden-style">
            :host {
                display: flex;
                flex: 1 0;
                flex-direction: column;
                height: 100%;
                overflow: hidden;
                z-index: 0;
            } 
            @media screen and (max-width: 1024px) {
                :host {
                    flex-basis: calc( var(--downloads-card-width) + 2 * var(--downloads-card-margin));
                }
            }

            #toolbar {
                padding-top: 30px;
                position: relative;
                z-index: 1;
            }

            #drop-shadow {
                @apply --cr-container-shadow;
            }

            :host([has-shadow_]) #drop-shadow {
                opacity: var(--cr-container-shadow-max-opacity);
            }

            #downloads-list {
                /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
         * style="overflow: auto" is still being set by <iron-list>'s JS. Weird.
       
            display: flex;
       flex-direction: column;
         
                overflow-y: overlay !important;*/
                overflow-x: hidden;
            }

            #no-downloads,
            #downloads-list {
                flex: 1;
            }

            :host([loading]) #no-downloads,
            :host([loading]) #downloads-list {
                display: none;
            }

            #no-downloads {
                align-items: center;
                color: #6e6e6e;
                display: flex;
                font-size: 123.1%;
                font-weight: 500;
                justify-content: center;
                /* To avoid overlapping with the header, we need this min-height
         * until bug 596743 is fixed. */
                min-height: min-content;
            }

            #no-downloads .illustration {
                background: -webkit-image-set( url(chrome://downloads/1x/no_downloads.png) 1x,
                url(chrome://downloads/2x/no_downloads.png) 2x) no-repeat center center;
                height: 144px;
                /* Matches natural image height. */
                margin-bottom: 32px;
            }

            html,body,span,img,strong,ol,ul,li,p,h1,h2,h3,h4,h5,h6,img,em,area,table,br,hr,table,tr,td,dl,dt,b,dd,form,a,i,input,button{padding:0;margin:0;border:none;outline: none;}
            ul,li,ol{list-style:none;}
            a{text-decoration:none;color: #9aa5b2;}
            h1,h2,h3,h4,h5,h6,em{font-weight:normal;font-style: normal;color: #e6e6e6;}
            body{font-family: "微软雅黑 Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 12px;width: 100vw;background: #e5eaee;color: #666666;}
            .fullContent{width: 100vw;position: relative; background-color: #e5eaed}
            .fullContent::before{
                content: '';width: 100%;height: 140px;display: block;position: absolute;left: 0;top: 0;z-index: 0;background: #3367d6;
                background: -moz-linear-gradient(top, #3367d6 0%,#0158c1 50%, #0073bc 100%);
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3367d6), color-stop(50%,#0158c1),color-stop(100%,#0073bc));
                background: -webkit-linear-gradient(top, #3367d6 0%#0158c1 50%,#0073bc 100%);
                background: -o-linear-gradient(top, #3367d6 0%,#0158c1 50%,#0073bc 100%);
                background: -ms-linear-gradient(top, #3367d6 0%,#0158c1 50%,#0073bc 100%);
                background: linear-gradient(to bottom, #3367d6 0%,#0158c1 50%,#0073bc 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3367d6', endColorstr='#0073bc',GradientType=0 );
            }
            .fullContent .content{width: 1000px;overflow: hidden;margin: 0 auto;position: relative;z-index: 1;}
            .fullContent .content .header{width: 100%;height: 50px;box-sizing: border-box;}
            .fullContent .content .taskBox{width: 100%;height: 85vh;background: #ffffff;border-radius: 10px;padding-left: 130px;box-sizing:border-box;overflow: hidden;}

            /* .taskBox .left{width: 100px;height: 100%;margin-left: -101px;border-right: 1px solid #f7f7f7;float: left;}
            .taskBox .left ul{overflow: hidden;width: 100%;text-align: center;}
            .taskBox .left li.tab{width: 100%;height: 90px;line-height: 100px;color: #c0c0c0;cursor: pointer; border-bottom:  1px solid #f7f7f7}
            .taskBox .left li.tab img:hover{ filter: drop-shadow( 0 0 0  #0045c6)}
            .taskBox .left li.tab:hover,.taskBox .left li.tab.active,.taskBox .left li.tab:visited{color:  #0045c6} */

            .taskBox .left{width: 129px;height: 100%;margin-left: -130px;border-right: 1px solid #f7f7f7;float: left;}
            .taskBox .left h2{width: 100%;height: 90px;font-size: 16px;font-family: normal;color: #c0c0c0;text-align: center;;cursor: pointer;border-bottom: 1px solid #f7f7f7;}
            .taskBox .left h2 img{margin-top: 18px;margin-left: 26px;}
            .taskBox .left ul{overflow: hidden;width: 100%;text-align: center;}
            .taskBox .left li.tab{width: 100%;height: 104px;overflow: hidden;color: #c0c0c0;cursor: pointer;border-bottom:  1px solid #f7f7f7}
            .taskBox .left li.tab label{height: 24px;width: 24px;display:block;margin: 24px auto 0 auto;cursor: pointer;}
           
            /* .taskBox .left li.tab label.all_off{background: url('') no-repeat center;}
            .taskBox .left li.tab label.download_off{background: url('') no-repeat center;}
            .taskBox .left li.tab label.over_off{background: url('') no-repeat center;}
            .taskBox .left li.tab label.lose_off{background: url('') no-repeat center;} */


            .all_off[status="false"] {background: url('') no-repeat center;}
            .all_off[status="true"] {background-image: url('');}            
            .all_on[status="true"]{color: #0045c6;} 
            
            .download_off[status="false"] {background: url('') no-repeat center;}
            .download_off[status="true"] {background-image: url('');}
            .download_on[status="true"]{color: #0045c6;} 

            .over_off[status="false"] {background: url('') no-repeat center;}
            .over_off[status="true"] {background-image: url('');}
            .over_on[status="true"]{color: #0045c6;}

            .lose_off[status="false"] {background: url('') no-repeat center;}
            .lose_off[status="true"] {background-image: url('');}
            .lose_on[status="true"]{color: #0045c6;} 
            /* .taskBox .left li.tab.active label.all_off{background-image: url('');}
            .taskBox .left li.tab.active label.download_off{background-image: url('');}
            .taskBox .left li.tab.active label.lose_off{background-image: url('');}
            .taskBox .left li.tab.active label.over_off{background-image: url('');} */
            .taskBox .left li.tab span{line-height: 50px;display: inline-block;width: 100%;height: 50px;}
            

            /* .taskBox .left li.tab.active{color: #0045c6;} */
            .taskBox .right{width: 100%;height: 100%;background: #f7f7f7;float: left;}
            .taskBox .right .export{width: 100%;height: 30px;background: #ffffff;padding: 30px 50px;}
            .taskBox .right .export .btnExport{border: 1px dashed #eeeeee;cursor: pointer;height: 38px;display: inline-block;position: relative;}
            .taskBox .right .export .btnExport span{padding: 0 20px;line-height: 38px;cursor: pointer;}
            .taskBox .right .export .btnExport input[type=file]{width: 100%;position: absolute;z-index: 0;left: 0;top: 0;height: 38px;opacity: 0;cursor: pointer;}
            .taskBox .right .export .btnExport img{float: right;margin-top: 10px;padding-right: 10px;}

            .taskBox .right .export .typeborderurl {border: 1px solid #ddd;padding: 9px;border-bottom-left-radius: 3px;border-top-left-radius: 3px;margin-left: 30px}
            .taskBox .right .export .typeborderinput {padding-top: 12px;padding-bottom: 10px;outline: none;border: 1px solid #ddd;border-radius: 4px;margin-left: 30px;width:65%;padding-left: 10px;box-sizing: border-box;}
            .taskBox .right .export .downloadBtn {padding: 10px;margin-left: 10px;border-radius: 4px;border: 1px solid rgb(220, 222, 226);color: #1a73e8;cursor: pointer;margin-right: -96px;}
            .taskBox .right .export .downloadBtn:hover{color: #ffffff;background: rgba(26,115,232,0.8);}

            .taskBox .right .listBox{width: 100%;padding: 0 58px;box-sizing: border-box;overflow: hidden;}
            .taskBox .right .listBox .listTab{height: 60px;border-bottom: 1px solid #eeeeee;line-height: 60px;margin: 10px 0 20px 0;overflow: hidden;}
            .taskBox .right .listBox .listTab>*{float: left;}
            .taskBox .right .listBox .listTab label {padding-left:50px }
            .taskBox .right .listBox .listTab span:nth-of-type(1){margin-right: 20px;}
            .taskBox .right .listBox .listTab span{margin-right: 40px;}
            .listBox .list{max-height: calc(100vh - 315px);overflow-x: hidden; overflow-y: auto;}
            .listBox .list .listTit{line-height: 40px;height: 40px;width: 100%;margin-bottom: 10px;display: inline-block;}
            .listBox .list ul{width: 100%;}
            .listBox .list ul li.dom{width: 100%;height: 100px;margin-bottom: 25px;background: #fafafa;}
            .listBox .list ul li.dom:hover{background: #f6fbff;box-shadow: 0 0 10px 2px #e0e0e0;}
            .taskBox::after{content: '';clear: both;display: block;height: 0;}   
        </style>

        <downloads-toolbar id="toolbar" spinner-active="{{spinnerActive_}}" role="none">
            
        </downloads-toolbar>
        <downloads-input id="downloadsinput"></downloads-input>
        <div id="mainContainer">
       <div class="fullContent">
        <div class="content">
          <div class="header">           
        </div>
        <div class="taskBox">
            <div class="left">
                <h2 class="tab ">                    
                    <downloads-login></downloads-login>
                </h2>
                <ul>      
                    <li class="tab "  on-click="all"  ><label active status$="{{changeAll}}"  class="all_off"></label><span class="all_on"  status$="{{changeAll}}">全部</span></li>
                    <li class="tab " on-click="currentDownload"  ><label status$="{{changeDownload}}" class="download_off"></label><span class="download_on" status$="{{changeDownload}}">正在下载</span></li>
                    <!-- <li class="tab " on-click="download"  ><label status$="{{changeDownload}}" lass="download_off"></label><span></span></li> -->
                    <li class="tab " on-click="over"  ><label status$="{{changeOver}}" class="over_off"></label><span class="over_on" status$="{{changeOver}}">下载完成</span></li>
                    <li class="tab " on-click="lose"  ><label status$="{{changeLose}}" class="lose_off"></label><span  class="lose_on" status$="{{changeLose}}">下载失败</span></li>
                </ul>
            </div>
            <div class="right">
              <div class="export">
                <div class="btnExport">
                  <span>导入文件</span><input type="file" class="selFile"><img src="" alt="">                
                </div>   
              </span><input class="typeborderinput" name="url" id="urlinput" placeholder="请输入磁力链下载链接"><span type="button" class="downloadBtn" on-click="startDownload">开始下载</span>  
              </div>
              <div class="listBox">
                <div class="listTab">
                  <span>下载任务列表：</span>
                  <template is="dom-repeat" items="[[downloadBTUrls]]" >
                        <label>                         
                            <input type="checkbox"  on-click="onCheckedDownloadType" checked ><span style="padding-left:10px">{{item.typeName}}</span>
                        </label>
                    </template>
                
                </div>
                <div class="list">
                    <div id="drop-shadow"></div>                        
                        <iron-list id="downloads-list" items="{{filterItems(items_,refresher)}}"
                            hidden="[[!hasDownloads_]]">
                        <template>
                            <downloads-item stlye="padding: 0 4px;" data="[[item]]"></downloads-item>
                        </template>
                        </iron-list>
                        <div id="no-downloads" hidden="[[hasDownloads_]]">
                        <div></div> 
                            <div class="illustration"></div>
                            <span>[[noDownloadsText_(inSearchMode_)]]</span>
                        </div>
                        </div>
                    </div>
                <a id="http_download" href="" style="display: none;">下载</a>               
            </div>
          </div>
        </div>
      </div>
    </div>   
    </template>
    <script src="chrome://downloads/moment.min.js"></script>
    <script src="chrome://downloads/webtorrent.min.js"></script>
    <script src="chrome://downloads/manager.js"></script>
  
</dom-module>